<template>
    <!-- residentSearch-bar -->
    <div style="margin-bottom: 30px;">
        <p class="page-title">居民管理</p>
        <el-form :model="filterForm" label-width="100px">
            <!-- 第一行 -->
            <el-row :gutter="0">
                <el-col :span="6">
                    <el-form-item label="签约状态">
                        <el-select v-model="filterForm.state" placeholder="请选择" clearable>
                            <el-option v-for="item in signState" :key="item.state" :label="item.name" :value="item.state" />
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="6">
                    <el-form-item label="签约机构">
                        <el-select v-model="filterForm.organizationId" placeholder="请选择" clearable>
                            <el-option v-for="item in AgencyData.rows" :key="item._id" :label="item.name" :value="item._id" />
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="6">
                    <el-form-item label="医生团队">
                        <el-select v-model="filterForm.teamId" placeholder="请选择" clearable>
                            <el-option v-for="item in TeamData.rows" :key="item._id" :label="item.name"
                                :value="item._id" />
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="6" class="action-col">
                    <el-button v-permission="'新增居民档案'" type="primary" @click="toAdd" style="height: 40px;width:120px">
                        新增居民档案
                    </el-button>
                    <el-button style="height: 40px;width: 64px;" type="primary" plain>导出</el-button>
                </el-col>
            </el-row>

            <!-- 第二行 -->
            <el-row>
                <el-col :span="6">
                    <el-form-item label="服务包">
                        <el-select v-model="filterForm.servicePackId" placeholder="请选择" clearable>
                            <el-option v-for="item in ServicePacksData.rows" :key="item._id" :label="item.name"
                                :value="item._id" />
                            
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="6">
                    <el-form-item label="居民标签">
                        <el-select v-model="filterForm.tagIds" placeholder="请选择" clearable>
                          <el-option v-for="item in TagsData.rows" :key="item._id" :label="item.name"
                                :value="item._id" />
                            
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="6">
                    <el-form-item label-width="auto">
                        <el-input v-model="filterForm.input_search" placeholder="请输入居民姓名" clearable
                             class="search-input" @focus="clearin">
                            <template #append>
                                <el-button :icon="Search" @click="onSearch"/>
                            </template>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script setup>
import { onMounted, ref, watch, watchEffect } from 'vue';
import { Search } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';
import { useFindData } from '../../../composables/findData';
const emit = defineEmits(['findResidentsData'])
const filterForm = defineModel('selectData')
const { AgencyData, findAgencyAsync, TeamData,findTeamAsync,TagsData, findTagsAsync,ServicePacksData, findServicePacksAsync } = useFindData()


const router = useRouter();
// const filterForm = ref({
//     input_search: '',
//     state: '',
//     organizationId: '',
//     teamId: '',
//     servicePackId: '',
//     tagIds: ''
// });



const toAdd = () => {
    router.push('/resident/ResidentAdd')
}

const signState = [
    { state:0,name:'待签约'},
    { state:1,name:'待审核'},
    { state:2,name:'已签约'},
    { state:3,name:'待续约'},
]

const handleSearch = () => {
    console.log('执行搜索:', filterForm.value.keyword);
    // 这里实现搜索逻辑
};


onMounted(() => {
    findAgencyAsync();
    findTeamAsync();
    findTagsAsync();
    findServicePacksAsync();
})

function onSearch(){
    console.log(filterForm.value);
    emit('findResidentsData') 
}
function clearin(){
    filterForm.value={}
    emit('findResidentsData') 
}

</script>


<style scoped>
.page-title {
    padding-left: 20px;
    margin-left: 10px;
    position: relative;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 20px;
    color: #333;
}

.page-title::before {
    position: absolute;
    content: "";
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 20px;
    border-radius: 3px;
    background-color: #2984f8;
}

.el-form-item {
    margin-bottom: 10px;
}

.action-col {
    display: flex;
    justify-content: flex-end;
    height: 40px;
}

.el-input {
    margin-left: 30px;
    --el-input-height: 40px
}

.search-input {
    width: 100%;
}
</style>

<style>
.el-select .el-select__wrapper {
    min-height: 40px;
}

</style>